<!-- 客户更多看板 -->
<template>
    <div class="dy-panel" v-if="showClientMoreLayer">
      <div class="dy-panel-main">
        <div class="dy-panel-header">
          <div class="dy-panel-close" @click="closeCurrent"></div>
        </div>
        <div class="dy-panel-content">
          <div class="dy-panel-item" v-for="(item, index) in moreDataList" :key="index" @click="clickMoreEvent(item)">
            <div class="t-l"></div>
            <div class="t-r"></div>
            <div class="b-l"></div>
            <div class="b-r"></div>
            <div class="dy-panel-icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
            <div class="dy-panel-text">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
  
    <!-- 子组件区域 -->
    <client-fwqklph-layer v-if="fwqklphShowLayer" @closeChild="closeChild"></client-fwqklph-layer> 
    <client-klsrrqs-layer v-if="klsrrqsShowLayer" @closeChild="closeChild"></client-klsrrqs-layer>
    <client-rkltqdb-layer v-if="rkltqdbShowLayer" @closeChild="closeChild"></client-rkltqdb-layer>
  </template>
  
  <script setup>
  import { ref } from "vue";
  import fwqklph from "../../../assets/img/yzclientflow/fwqklph.png";
  import klsrrqs from "../../../assets/img/yzclientflow/klsrrqs.png";
  import rkltqdb from "../../../assets/img/yzclientflow/rdb.png";

  
  // 子组件导入
import ClientFwqklphLayer from "./clientFwqklphLayer.vue";
import ClientKlsrrqsLayer from "./clientKlsrrqsLayer.vue";
import ClientRkltqdbLayer from "./clientRkltqdbLayer.vue";
  
  const props = defineProps({
    showClientMoreLayer: Boolean,
  });
  
  const emit = defineEmits(["closeMoreLayers", "showMoreLayers"]);
  
  const closeCurrent = () => {
    emit("closeMoreLayers", "client");
  };
  
  const showCurrent = () => {
    emit("showMoreLayers", "client");
  };
  
  const moreDataList = ref([
    {
      title: "服务区客流排行",
      icon: fwqklph,
      name: "fwqklph",
    },
    {
      title: "客流收入日趋势",
      icon: klsrrqs,
      name: "klsrrqs",
    },
    {
      title: "日客流同期对比",
      icon: rkltqdb,
      name: "rkltqdb",
    }
  ]);
  
  // 控制子组件显示状态
  const fwqklphShowLayer = ref(false);
  const klsrrqsShowLayer = ref(false);
  const rkltqdbShowLayer = ref(false);
  
  const clickMoreEvent = (item) => {
    closeCurrent();
    switch (item.name) {
      case "fwqklph":
        fwqklphShowLayer.value = true;
        break;
      case "klsrrqs":
        klsrrqsShowLayer.value = true;
        break;
      case "rkltqdb":
        rkltqdbShowLayer.value = true;
        break;
    }
  };
  
  const closeChild = () => {
    fwqklphShowLayer.value = false;
    klsrrqsShowLayer.value = false;
    rkltqdbShowLayer.value = false;
    showCurrent();
  };
  </script>
  
  <style scoped>
  .dy-panel {
    position: fixed;
    top: 27vh;
    width: 100%;
  }
  
  .dy-panel-main {
    background: rgba(5, 36, 44, 0.9);
    width: 80vh;
    min-height: 50vh;
    margin: 0 auto;
    padding-right: 2.5vh;
    padding-bottom: 2.5vh;
    position: relative;
  }
  
  .dy-panel-header {
    height: 3vh;
  }
  
  .dy-panel-close {
    position: absolute;
    height: 2.6vh;
    width: 2.6vh;
    background-image: url("../../../assets/img/public/关闭.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    right: 1vh;
    top: 2vh;
    cursor: pointer;
  }
  
  .dy-panel-content {
    display: flex;
    padding: 1vh;
    flex-wrap: wrap;
  }
  
  .dy-panel-item {
    position: relative;
    width: 30%;
    border: 1px solid #407f86;
    margin-left: 2.2vh;
    margin-top: 2.5vh;
    padding: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }
  
  .t-l,
  .t-r,
  .b-l,
  .b-r {
    position: absolute;
    border: 2px solid #00EAFF;
  }
  
  .t-l {
    border-right: none;
    border-bottom: none;
    width: 2vh;
    height: 2vh;
    left: 0;
    top: 0;
  }
  
  .t-r {
    border-left: none;
    border-bottom: none;
    width: 2vh;
    height: 2vh;
    right: 0;
    top: 0;
  }
  
  .b-l {
    border-top: none;
    border-right: none;
    width: 2vh;
    height: 2vh;
    left: 0;
    bottom: 0;
  }
  
  .b-r {
    border-top: none;
    border-left: none;
    width: 2vh;
    height: 2vh;
    right: 0;
    bottom: 0;
  }
  
  .dy-panel-icon {
    width: 3.8vh;
    height: 3.8vh;
    background-size: 100% 100%;
    margin: 2vh 0;
  }
  
  .dy-panel-text {
    color: #ffffff;
    font-family: "PingFang SC", serif;
    font-weight: bolder;
    font-size: 2vh;
  }
  </style>